/*
 * 登录页和注册页样式
 */

html,body{
	width: 100%;
	height: 100%;
}
/*背景样式*/
.bgStyle{
	width: 100%;
	min-width: 1200px;
	height: 100%;
	min-height: 600px;
	background-image:radial-gradient(at 0px 0px,#23a0da 5%,#115dde 20%,#433ab7 60%);
	background-color: #0091d3;
	overflow: hidden;
}
.bgImg{
	width: 100%;
	height: 100%;
	position: relative;
	
}
/*设置三个圆的颜色和阴影效果*/
.yuan{	
    border-radius: 50%;
    background-color: rgba(255,255,255,0);/*设置圆的背景颜色为白色透明*/
   /*设置阴影向四周发散,阴影模糊程度为26px,阴影颜色为白色,类型为内阴影*/
    box-shadow: 0 0 26px white inset;   
}
/*分别设置三个圆的大小、位置和透明度*/
.yuan:nth-of-type(1){
	width: 140px;
    height: 140px;
    position: absolute;
    left: 140px;
    top: 100px;
    opacity: 0.3;
}
.yuan:nth-of-type(2){
	width: 200px;
    height: 200px;
    position: absolute;
    right: 200px;
    bottom: 10px;
    opacity: 0.5;
}
.yuan:nth-of-type(3){
	width: 400px;
    height: 400px;
    position: absolute;
    right: -160px;
    top: -240px;
    opacity: 0.2;
}


/*登录页主体区居中显示*/
#login .main{
	position: absolute;
	left: 50%;
	top: 130px;
	width: 500px;
	margin-left: -250px;
}
/*logo图片*/
.logo{
	width: 100%;
	height: 60px;
	/*背景图片在容器中水平、垂直居中，图片大小为200px*40px，不重复*/
	background: url(../img/logoS.png) center center/200px 40px no-repeat;
}
/*白色方框效果*/
.content{
	width: 100%;
	background-color: white;
	border-radius: 5px;
	padding: 30px;
	box-sizing: border-box;
}
/*清除浮动*/
#login .content:after{
	content: "";
	display: block;
	clear: both;
}
/*左侧图片左浮动*/
#login .fl{
	width: 160px;
    height: 160px;
    background: url(../img/chengshi.png) 0 0/160px 160px no-repeat;
	float: left;
}
/*右侧表单右浮动*/
#login .fr{
	float: right;
}

/*登录页和注册页输入框的样式*/
.kuang{
	height: 24px;
	border-bottom: 1px dashed #e6e6e6;
	padding-bottom: 3px;   /*设置底部边框与图标和输入框之间的距离*/
	margin-bottom: 30px;   /*设置输入框所在的容器之间的间距*/
}
.kuang i{
	color: #bfbfbf;
	font-size: 18px;
}
.kuang input{
	width: 160px;
	height: 20px;
	border: none;   /*消除显示的边框*/
	outline: none;  /*消除鼠标聚焦时出现的外边框*/
} 
/*登录和注册按钮样式*/
.btn{
	text-align: center;
}
.btn > a{
	display: block;
    width: 200px;
    height: 30px;
    text-align: center;  /*文字水平居中显示*/
    line-height: 30px;   /*文字垂直居中显示*/
    color: white;
    background-color: #3246c4;
    box-shadow: 0px 2px 2px #aaaaaa;  /*设置按钮外阴影向下偏移2px，模糊程度为2px*/
    border-radius: 3px;		/*设置按钮为圆角*/
    margin: 0 auto 5px;  /*设置按钮在容器中水平居中，与下面的文字有5px的间距*/
}
.btn span{
	font-size: 12px;
	color: #aaa;
}
.btn span a{
	color: #3246c4;
}


/*注册页居中显示区*/
#register .main{
	position: absolute;
	left: 50%;
	top: 40px;
	width: 500px;
	margin-left: -250px;
}
#register select,#register option{
	width: 120px;
	border: none;
	color: #8d8d8d;
	background: none;
}

/*底部*/
#footer{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 50px;
	background-color: rgba(0,0,0,0.7);
	overflow: hidden;
}
#footer:hover{
	animation: changeH 2s forwards;  /*forwards规定动画完成后停在结束的位置*/
}
/*友情链接等居中显示内容*/
#footer .center{
	width: 1000px;
	margin: 0 auto;
}

#footer .center dl{
	width: 250px;
	float: left;
	padding-right: 30px;
	box-sizing: border-box;
}
#footer .center dt a{
	color: gray;
	font-weight: bold;
	line-height: 50px; 
}
#footer .center dd a{
	line-height: 22px;
	font-size: 14px;
	color: gray;
}

@keyframes changeH{
	from{
		height: 50px;/*开始高度为50px*/
	}
	to{
		height: 170px; /*结束高度为170px*/
		background-color: black;  /*结束背景为黑色不透明*/
	}
}











